<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 500px;
            height: 500px;
            background-color: gray;
        }
        
        #pp {
            width: 300px;
            height: 300px;
            background-color: green;
            padding: 50px;
        }
        
        #btn {
            position: fixed;
            bottom: 20px;
            left: 20px;
        }
    </style>
</head>

<body>

    <div id="box">
        <p id="pp">
            <button id="btn">事件源</button>
        </p>

    </div>


    <script>
        var $box = document.querySelector('#box');
        var $pp = document.querySelector('#pp');
        var $btn = document.querySelector('#btn');

        // false表示在冒泡阶段触发, true表示在捕获阶段触发
        $box.addEventListener('click', function() {
            console.log('div监听到了事件');
        }, false);

        $pp.addEventListener('click', function() {
            console.log('p标签监听到了事件');
        }, false);

        $btn.addEventListener('click', function() {
            console.log('button标签监听到了事件');
        }, false);
    </script>
</body>

</html>